<template>
    <div>
        <p>插槽</p>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot name="default" :list="list"></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
        <!-- <component :is="comp"></component> -->
        <!-- <comp2></comp2> -->
    </div>
</template>

<script setup lang="ts">


const list = [1,2,3,4,5]
console.log(useSlots());

// 使用渲染函数创建带有作用域插槽的组件
// const comp = h('div', [
//   h('header', useSlots().header?.()), 
//   h('main', useSlots().default?.({ list })),  // 这里传递list作为作用域插槽的数据
//   h('footer', useSlots().footer?.())
// ]);

</script>

<style lang="scss" scoped>

</style>